<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico" />
    <title>Makeit Admin Pro - Powered by makeit.vip</title>
    <meta name="keywords" content="lirongtong, makeit admin pro, vue, vite, ant design vue">
    <meta name="description" content="makeit's backend management system ( a unified template ).">
    <style type="text/css">
        .mi-loading-init {
			background-color: #1d1e23;
			height: 100%;
			bottom: 0;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 20221209;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.mi-loading-init .loading {
			display: flex;
		}

		.mi-loading-init .preloader {
			padding-left: 15px;
			padding-right: 15px;
		}

		.mi-loading-init .spinner {
			animation: spinner 3s infinite linear;
			border-radius: 50%;
			border: 3px solid #f1f6f8;
			border-left-color: #f0c26f;
			border-top-color: #f0c26f;
			margin: 0 auto 0em auto;
			position: absolute;
			left: -40px;
			right: -40px;
			bottom: -40px;
			top: -40px;
		}

		.mi-loading-init .spinner:before {
			content: "";
			position: absolute;
			right: 31px;
			top: 41px;
			width: 20px;
			height: 20px;
			border: 6px solid #fff;
			box-shadow: 0 0 20px 0 rgba(4, 46, 56, 0.2);
			background: #f0c26f;
			border-radius: 50%;
			box-sizing: border-box;
		}

		.mi-loading-init .spinner-logo {
			border-width: 1px;
			border-color: rgb(238, 243, 244);
			border-style: solid;
			border-radius: 50%;
			background-color: rgb(253, 253, 253);
			box-shadow: 0 0 100px 0 rgba(4, 46, 56, 0.14);
			width: 248px;
			height: 248px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 40px auto 80px;
		}

		.mi-loading-init .spinner-logo .logo img {
			border-radius: 12px;
		}

		.mi-loading-init .letters {
			font: bold 4.5em "Exo 2", sans-serif, "Roboto", sans-serif;
			text-align: center;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		.mi-loading-init .letters .letter {
			color: #f0c26f;
			position: relative;
		}

		.mi-loading-init .letters .letter::before {
			-webkit-animation: letters-loading 4s infinite;
			animation: letters-loading 4s infinite;
			color: #f0c26f;
			content: attr(data-text-preloader);
			left: 0;
			opacity: 0;
			font-family: "Exo 2", sans-serif;
			position: absolute;
			top: 0;
			-webkit-transform: rotateY(-90deg);
			transform: rotateY(-90deg);
		}

		@media (max-width: 576px) {
			.mi-loading-init .spinner:before {
				top: 18px;
			}

			.mi-loading-init .spinner-logo {
				width: 155px;
				height: 155px;
			}

			.mi-loading-init .letters {
				font-size: 2em;
			}

			.mi-loading-init .letters .letter::before {
				top: 0;
			}
		}

		@keyframes spinner {
			to {
				-webkit-transform: rotateZ(360deg);
				transform: rotateZ(360deg);
			}
		}

		@-webkit-keyframes letters-loading {

			0%,
			75%,
			100% {
				opacity: 0;
				-webkit-transform: rotateY(-90deg);
				transform: rotateY(-90deg);
			}

			25%,
			50% {
				opacity: 1;
				-webkit-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}

		@keyframes letters-loading {

			0%,
			75%,
			100% {
				opacity: 0;
				-webkit-transform: rotateY(-90deg);
				transform: rotateY(-90deg);
			}

			25%,
			50% {
				opacity: 1;
				-webkit-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}
		}
    </style>
</head>
<body>
    <div id="app">
        <div id="mi-loading-before-init" class="mi-loading-init">
            <div id="mi-loading-before-init-preloader" class="preloader">
                <div class="spinner-logo">
                    <div class="spinner"></div>
                    <div class="logo">
						<img src="/logo.png" width="80" alt="makeit's logo" />
					</div>
                </div>
                <div class="letters">
                    <span data-text-preloader="M" class="letter">M</span>
                    <span data-text-preloader="A" class="letter">A</span>
                    <span data-text-preloader="K" class="letter">K</span>
                    <span data-text-preloader="E" class="letter">E</span>
                    <span data-text-preloader="I" class="letter">I</span>
                    <span data-text-preloader="T" class="letter">T</span>
                    <span data-text-preloader="." class="letter">.</span>
                    <span data-text-preloader="V" class="letter">V</span>
                    <span data-text-preloader="I" class="letter">I</span>
                    <span data-text-preloader="P" class="letter">P</span>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="/example/index.ts"></script>
</body>
</html>
